import React from 'react';
import { Card, Table, Button, Space, message } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { DownloadOutlined, DeleteOutlined } from '@ant-design/icons';

interface FileType {
  key: string;
  name: string;
  size: string;
  type: string;
  uploadTime: string;
}

const ListFiles: React.FC = () => {
  const columns: ColumnsType<FileType> = [
    {
      title: '文件名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '大小',
      dataIndex: 'size',
      key: 'size',
    },
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
    },
    {
      title: '上传时间',
      dataIndex: 'uploadTime',
      key: 'uploadTime',
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Button 
            type="link" 
            icon={<DownloadOutlined />}
            onClick={() => handleDownload(record)}
          >
            下载
          </Button>
          <Button 
            type="link" 
            danger 
            icon={<DeleteOutlined />}
            onClick={() => handleDelete(record)}
          >
            删除
          </Button>
        </Space>
      ),
    },
  ];

  const data: FileType[] = [
    {
      key: '1',
      name: '示例文件1.pdf',
      size: '1.2MB',
      type: 'PDF',
      uploadTime: '2024-03-20 10:00:00',
    },
    {
      key: '2',
      name: '示例文件2.jpg',
      size: '2.5MB',
      type: '图片',
      uploadTime: '2024-03-20 11:00:00',
    },
  ];

  const handleDownload = (record: FileType) => {
    message.info(`下载文件: ${record.name}`);
  };

  const handleDelete = (record: FileType) => {
    message.success(`删除文件: ${record.name}`);
  };

  return (
    <Card title="文件列表">
      <Table columns={columns} dataSource={data} />
    </Card>
  );
};

export default ListFiles; 